<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5学堂 - alert</title>

</head>

<body>


<script>

window.alert = alert;

function alert(data) {

var a = document.createElement("div"),

p = document.createElement("p"),

btn = document.createElement("div"),

textNode = document.createTextNode(data ? data : ""),

btnText = document.createTextNode("确定");

// 控制样式

css(a, {

"position" : "fixed",

"left" : "0",

"right" : "0",

"top" : "20%",

"width" : "100px",

"margin" : "0 auto",

"background-color" : "#f00",

"font-size" : "20px",

"text-align" : "center"

});

css(btn, {

"background" : "blue",

})

// 内部结构套入

p.appendChild(textNode);

btn.appendChild(btnText);

a.appendChild(p);

a.appendChild(btn);

// 整体显示到页面内

document.getElementsByTagName("body")[0].appendChild(a);

// 确定绑定点击事件删除标签

btn.onclick = function {

a.parentNode.removeChild(a);

}

}

function css(targetObj, cssObj) {

var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";

for(var i in cssObj) {

str += i + ":" + cssObj[i] + ";";

}

targetObj.style.cssText = str;

}

alert(123);

</script>

</body>

</html>